<!DOCTYPE html>
<html>


<head>
	<meta charset="UTF-8">
	<title>可输入的下拉框（允许输入非选项值）</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<link rel="stylesheet" href="../../libs/jsTree/style.min.css">

	<script src="../../libs/jquery-easyui-1.8.5/jquery.min.js"></script>
	<script src="../../libs/layui/layui-2.4.5/dist/layui.js"></script>
	<script src="../../libs/jsTree/jstree.js"></script>
	<style>
		body{padding: 10px 100px;}

	</style>
</head>

<body >

	<pre class="layui-code">
		#jsTree demo
	</pre>
	<div id="demo"></div>
	<br /><br />
	<div id="demo2"></div>
	<br /><br />
	<div id="demo3"></div>
	
	<script>
		$("#demo").jstree({
			"core":{
				"themes":{
					"variant":"large"
				},
				"multiple":false,
				"animation":0,
				"data":[
					{id:1,text:"jiang",parent:"#"},
					{id:2,text:"xu",parent:"1"},
					{id:3,text:"xx",parent:"#"},
				]
			},
			"checkbox":{
				"keep_selected_style":false
			},
			"plugins":["wholerow","checkbox"]
		});
		
		

		$("#demo2").jstree({
			core:{
				themes:{
					variant:"large"
				},
				multiple:false,
				animation:0,
				data:[
					{id:1,text:"jiang",parent:"#"},
					{id:2,text:"xu",parent:"1"},
					{id:3,text:"xx",parent:"#"},
				]
			},
			checkbox:{
				"keep_selected_style":false
			},
			plugins:["wholerow","checkbox"]
		});


		let index = 0;
		$("#demo3").jstree({
			core:{
				themes:{
					variant:"large"
				},
				multiple:false,
				animation:0,
				data:{
					// url:'./jstree_data.json',
					url:function(node){
						if(node.id==='#'){
							return './jstree_data.json';
						}
						return './jstree_data.json?parent='+node.id;
					},
					data:function(node){
						node.index = (index++)
						return node;
					}
				}
			},
			checkbox:{
				"keep_selected_style":false
			},
			plugins:["wholerow","checkbox"]
		});

	</script>
</body>

</html>